<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="消费验券">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-input title="商户号" :up-table="true" name="mchtId" :read-only="true"></form-input>
                        <form-input title="券号" :up-table="true" name="couNo"></form-input>

                        <v-button @click="search" theme="warning" class="pull-right">刷新记录</v-button>
                        <v-button theme="primary" @click="voucher" class="pull-right">验证</v-button>
                    </form>
                    <hr>
                    <label style="font-size: 20px">验券记录(最近10条):</label>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right: 10px;
    }
</style>
<script>
    import {dateTime, createDataTable} from 'ui/collections/general.js'
    import {dateFormat} from "lib/method.js"

    let serialize = require('form-serialize');

    let dataTable;
    let columnsSet;
    export default {
        data: () => ({
            item: {},
            columnsSet: []
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag () {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search () {
                dataTable.ajax.reload();
            },
            /*消费验券*/
            voucher: async function () {
                let vm = this;
                /*表单验证不通过即不往下走*/
                if (!$(vm.$els.form).validate().form()) {
                    return
                }
                let _data = serialize(this.$els.form, {
                    hash: true,
                    disabled: true,
                    empty: true
                });
                _data.tlrNo = JSON.parse(localStorage.getItem("id_token")).oprId;
                let result = await this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/txn/verification",
                    data: _data,
                    method: "POST"
                });
                if (result.respCode == "00") {
                    await Midway.confirm({
                        title: "操作提示",
                        content: "是否使用" + result.content.name + "?"
                    });
                    loading(true); // 加载动画开启
                    _data.tlrNo = "U" + _data.tlrNo; // 加U给后台标识
                    _data = Object.assign(_data, result.content); //合并参数进行验券
                    _data.couponMchtId = _data.couponmchtId; // 字段修正
                    delete _data.couponmchtId;
                    let voucherResult = await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/txn/websitecancellation",
                        data: _data,
                        method: "POST"
                    }).catch(() => loading(false));

                    loading(false); // 关闭动画
                    /*加延迟是为了让焦点停留在弹出框上*/
                    setTimeout(function () {
                        Midway.alert({
                            title: "操作提示",
                            content: voucherResult.respCode != "00" ? "核销失败" : "核销成功"
//                            content: 0 ? "核销失败" : "核销成功"
                        }).then(() => {
                            setTimeout(function () {
                                vm.$els.form.couNo.value = "";
                                vm.$els.form.couNo.focus(); // 获得焦点
                            }, 300);
                        });
                    }, 300);
                    vm.search();
                }

            }
        },
        created () {
            columnsSet = [
                {
                    title: "券号",
                    data: "couNo",
                    readonly: true,
                    edit: true,
                    className: "operate"
                },
                {
                    title: "券名称",
                    data: "name",
                    edit: true,
                    readonly: true,
                    className: "operate",
                },
                {
                    title: "操作者",
                    data: "oprName",
                    className: "operate",
                    render: function (value, type, row) {
                        return value ? value : row.tlrNo
                    }
                },
                {
                    title: "验券日期",
                    data: "orderDate",
                    className: "operate",
                    render: function (data) {
                        return dateFormat(data)
                    }
                },
//                {
//                    title: "相关操作",
//                    className: "operate",
//                    width:"160px",
//                    render: function(value, type, row) {
//                        return `
//                        <button type="button" class="btn btn-primary btn-sm edit">编辑</button>
//                        <button type="button" class="btn btn-danger btn-sm delete">删除</button>
//                    `
//                    }
//                }
            ]
        },
        ready: async function () {
            let vm = this;
            vm.$els.form.mchtId.value = localStorage.getItem('list_mid');
            vm.$els.form.couNo.focus(); // 获得焦点
            /*绑定表单验证规则*/
            $(vm.$els.form).validate({
                rules: {
                    couNo: {
                        required: true
                    }
                }
            });
            /*监听回车事件*/
            $(document).on('keyup', function (e) {
                if (e.keyCode === 13) {
                    if (document.activeElement === vm.$els.form.couNo) {
                        vm.voucher()
                    } else {
                        vm.$els.form.couNo.focus() // 获得焦点.
                    }
                }
            });
            this.$set("columnsSet", columnsSet);
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
//                    var page = [{
//                        "name": "iDisplayStart",
//                        "value": 1 + data.start / data.length
//                    }, {
//                        "name": "iDisplayLength",
//                        "value": data.length
//                    }];
                    //表单序列化数据
                    let _data = serialize(vm.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
//                    _data.aoData = JSON.stringify(page);
                    delete _data.couNo;
                    //发送请求
                    let result = await vm.$post({
                        url: "/api/v2" + projectName_Url + "/plat/txn/voucherrecord",
                        data: _data,
                        method: "POST"
                    });
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.list.length,
                        recordsFiltered: result.content.list.length,
                        data: result.content.list || []
                    })
                }
            });
        },
        beforeDestroy () {
            $(this.$el).off("click");
            $(this.$el).off("keyup");
        }
    }
</script>
